<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
    <h2 v-if="show">电话：{{ tel }}</h2>
  </div>
</template>

<!-- <script lang="ts">
export default {
  name: "person",
  // data() {
  //   return {
  //     name: "张三",
  //     age: 18,
  //     tel: "13888888888",
  //     show: false,
  //   };
  // },
  // methods: {
  //   changeName() {
  //     this.name = "zhang-san";
  //   },
  //   changeAge() {
  //     this.age += 1;
  //   },
  //   showTel() {
  //     this.show = !this.show;
  //   },
  // },
  // setup() {
  //   //setup里面没有this，this是undefined，vue中已经弱化this了
  //   let name = "张三"; //这样定义name 不是响应式的
  //   let age = 18;
  //   let tel = "13888888888";
  //   let show = false;

  //   function changeName() {
  //     name = "zhang-san"; //这样修改this，页面不会变化
  //     console.log("changeName", name);
  //   }
  //   function changeAge() {
  //     age += 1;
  //     console.log("changeAge", age);
  //   }
  //   function showTel() {
  //     show = !show;
  //     console.log("showTel", show);
  //   }
  //   return { name, age, tel, show, changeName, changeAge, showTel };
  // },
};
</script> -->
<!-- setup语法糖 -->
<script lang="ts" setup name="person">
import { ref } from "vue";
let name = ref("张三");
let age = ref(18);
let tel = "13888888888";
let show = ref(false);
console.log(1,name);
console.log(1,age.value);
console.log(1,tel);
console.log(1,show);

function changeName() {
  name.value = "zhang-san";
}
function changeAge() {
  age.value += 1;
}
function showTel() {
  show.value = !show.value;
}
</script>

<style scope>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>